<template>
  <div class="main-container">
    <div class="article-container">
      <ArticleCard v-for="article in articleList" :article="article" :key="article.id"/>
    </div>
    <div class="side-container">
      <h2>专栏</h2>
      <ul>
        <li v-for="type in articleTypes" :key="type.id">
          <div class="type-item" :class="{ active: articleTypeId === type.id }">
            <a @click.stop="handleSelectType(type.id)">{{ type.name }}</a>
            <div v-if="articleTypeId === type.id" class="count" @click.stop="clearActiveType">
              <el-button class="close-icon" circle><i class="ri-close-large-line"></i></el-button>
            </div>
            <div v-else class="count">{{ type.count }}篇</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import ArticleCard from "../components/ArticleCard.vue";
import { getArticleList, getArticleListByType, getAllTypeList } from "@/api/portal.js";

const articleTypeId = ref(0);
const articleList = ref([]);
const articleTypes = ref([]);

const getDatList = function() {
  getArticleList(1, 10, {}).then(resp => {
    if (resp.code === 200) {
      articleList.value = resp.rows;
      return;
    }
    if (resp.code === 500) {
      ElMessage.error(resp.msg);
      return;
    }
  })
}
const getTypeListDat = function() {
  getAllTypeList().then(resp => {
    if (resp.code === 200) {
      articleTypes.value = resp.data;
      return;
    }
    if (resp.code === 500) {
      ElMessage.error(resp.msg);
      return;
    }
  })
}
const updateArticleListByType = function(typeId) {
  getArticleListByType(typeId).then(resp => {
    if (resp.code === 200) {
      articleList.value = resp.data;
      return;
    }
    if (resp.code === 500) {
      ElMessage.error(resp.msg);
      return;
    }
  })
}

const handleSelectType = function(typeId) {
  articleTypeId.value = typeId;
}

const clearActiveType = () => {
  articleTypeId.value = 0;
}

watch(articleTypeId, (newValue, oldValue) => {
  if (newValue !== oldValue) {
    if (newValue !== 0) {
      updateArticleListByType(newValue);
    } else {
      getDatList();
    }
  }
});

onMounted(() => {
  getDatList();
  getTypeListDat();
});
</script>

<style scoped>
.main-container {
  display: flex;
  gap: 30px;
}

.article-container {
  flex: 12;
}

.side-container {
  flex: 2;
  min-width: 280px;
  padding: 10px;
  border-radius: 8px;
  height: fit-content;
  transform: translateY(45%);
}

.side-container ul {
  list-style-type: none;
  padding-left: 0;
}

.type-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #666;
}
.type-item a {
  font-weight: blob;
  font-size: 1.1em;
}
.type-item.active {
  border: 2px solid #8AC926;
  border-radius: 4px;
  transition: border-color 0.3s ease;
}
.type-item a:hover {
  color: #007bff;
  cursor: pointer;
}
.count {
  color: #666;
  font-size: 0.9em;
  margin-left: 10px;
}
.close-icon {
  background-color: transparent;
  color: #c1121f;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 0px;
  &:hover {
    transform: rotate(45deg);
    color: #c1121f;
    background-color: transparent;
  }
}
</style>
